<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Uploader的常用配置</title>
<link rel="stylesheet" type="text/css" href="http://docs.kissyui.com/kissy-dpl/base/build/css/dpl-pkg.css"/>
<link rel="stylesheet" type="text/css" href="../../assets/demo.css"/>
<script src="http://a.tbcdn.cn/s/kissy/1.2.0/kissy.js" charset="utf-8"></script>
</head>
<body>
<article id="doc">
    <h4>使用常用配置的示例</h4>
    <h5>先来看个最简单的demo</h5>
    <p>点击下来的按钮，上传1个文件试下</p>
    <!-- 上传按钮，组件配置请写在data-config内 -->
    <a id="J_UploaderBtn" class="g-u uploader-button" data-config=
            '{"type" : "auto",
                "theme" : "default",
                "autoUpload" : false,
                "serverConfig":{"action":"upload.php","data":{"dir":"files/"},"dataType" : "json"},
                "name":"Filedata",
                "urlsInputName":"fileUrls"}'
       href="#">
        选择要上传的文件
    </a>
    <!-- 文件上传队列 -->
    <ul id="J_UploaderQueue">

    </ul>
    <div class="btn-wrapper">
        <input id="J_UploadAll" type="button" value="上传所有等待的文件">
    </div>
    <h5>组件参数配置情况</h5>
    <ul>
        <li>上传方式：<b id="J_UploadType"></b></li>
        <li>主题：<b id="J_Theme"></b>，为主题路径，留意如果你使用的是组件内置主题，只要传递主题名就好，比如"default"，非内置主题使用完整模块路径，不需要（/index）</li>
        <li>自动上传：<b id="J_AutoUpload"></b>，默认是true</li>
        <li>服务器端路径：<b id="J_ServerConfig"></b></li>
        <li>文件上传域名：<b id="J_FileName"></b></li>
        <li>路径input名：<b id="J_UrlsInput"></b></li>
    </ul>
    <p>值得留意上传方式的配置。type参数可以是数组，比如["flash","ajax","iframe"]，按顺序获取浏览器支持的方式，该配置会优先使用flash上传方式。</p>
    <p>type参数默认为<b>auto</b>，等于["ajax","iframe"]。</p>
    <h5>RenderUploader的init事件</h5>
    <p>如果你需要对初始化后监听的上传组件进行操作，比如删除文件后弹出个提示或者达到某个上传数需要禁用上传按钮等，</p>
    <p>那么需要监听RenderUploader实例的init事件，因为初始化Uploader前，要加载下模板js，这个过程很有可能是异步的。</p>
    <pre class='brush: js; '>
            KISSY.use('gallery/form/1.1/uploader/index', function (S, RenderUploader) {
                //第一个参数：按钮元素钩子，第二个参数：队列元素钩子
                var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
                //对组件的后续操作务必放在init事件内，因为组件时可能需要异步加载模板
                ru.on("init",function(ev){
                    var uploader = ev.uploader;
                })
            })
     </pre>
    init事件的event对象带有uploader，为Uploader的实例，获取到这个实例后，就可以对组件进行操作。
    <h5>获取Uploader实例的属性</h5>
    form组件包内的UI组件都继承于Base，所以获取属性，需要使用get方法，比如uploader.get('type')（uploader为Uploader的实例）。
    <pre class='brush: js; '>
        ru.on("init",function(ev){
            var uploader = ev.uploader;
            $('#J_UploadType').text(uploader.get('type'));
            $('#J_Theme').text(uploader.get('theme'));
            $('#J_AutoUpload').text(uploader.get('autoUpload'));
        })
     </pre>
    从理论上讲，你可以使用set方法变更配置，比如可以控制是否自动上传：uploader.set('autoUpload',true)，
    但很多属性只支持只读，比如type，theme属性。
    <h5>子类实例</h5>
   Uploader有二个非常重要的属性：button（Button上传按钮实例）和queue（Queue上传队列实例），
   如果你需要对按钮或队列进行操作，比如禁用上传按钮，或删除队列中的文件，那么就需要先获取这二个实例。
    <pre class='brush: js; highlight: [6,7,8,9]'>
        ru.on("init",function(ev){
            var $ = S.Node.all,
                    //上传组件实例
                    uploader = ev.uploader,
                    //上传按钮实例
                    button = uploader.get('button'),
                    //上传队列实例
                    queue = uploader.get('queue');
            //留意文件上传域的name值是通过Button实例获取
            $('#J_FileName').text(button.get('name'));
            //禁用上传按钮
            button.set('disabled',true);
        })
     </pre>
    <h5>upload()和uploadFiles()</h5>
    <p>这二个Uploader的方法非常重要，upload(index)上传指定index的文件。</p>
    <p>uploadFiles(status)：批量上传指定状态下的文件，默认status为等待。</p>
    <pre class='brush: js; highlight: [11]'>
        ru.on("init",function(ev){
            var $ = S.Node.all,
                    //上传组件实例
                    uploader = ev.uploader,
                    //上传按钮实例
                    button = uploader.get('button'),
                    //上传队列实例
                    queue = uploader.get('queue');
                    //点击上传，开始上传等待中的文件
            $('#J_UploadAll').on('click', function(ev) {
                    uploader.uploadFiles();
            })
        })
     </pre>
</article>
<script>
    var S = KISSY;
    S.config({
           packages:[ {
               name:"gallery",
               path:"../../../../../../",
               charset:"utf-8"
           } ]
    });
    //加载上传组件入口文件
    KISSY.use('gallery/form/1.1/uploader/index', function (S, RenderUploader) {
        //第一个参数：按钮元素钩子，第二个参数：队列元素钩子
        var ru = new RenderUploader('#J_UploaderBtn', '#J_UploaderQueue');
        //对组件的后续操作务必放在init事件内，因为组件时可能需要异步加载模板
        ru.on("init",function(ev){
            var $ = S.Node.all,
                    //上传组件实例
                    uploader = ev.uploader,
                    //上传按钮实例
                    button = uploader.get('button');
            $('#J_UploadType').text(uploader.get('type'));
            $('#J_Theme').text(uploader.get('theme'));
            $('#J_AutoUpload').text(uploader.get('autoUpload'));
            $('#J_ServerConfig').text(uploader.get('serverConfig').toString());
            //留意文件上传域的name值是通过Button实例获取
            $('#J_FileName').text(button.get('name'));
            $('#J_UrlsInput').text(uploader.get('urlsInputName'));

            //点击上传，开始上传等待中的文件
            $('#J_UploadAll').on('click', function(ev) {
                uploader.uploadFiles();
            })
        })
    })
</script>

<!-- 代码高亮 START  -->
<link href='../../assets/syntaxhighlighter_3.0.83/sh.css' rel='stylesheet' type='text/css' />
<script type="text/javascript" src="../../assets/syntaxhighlighter_3.0.83/sh.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>
<!-- 代码高亮 END  -->
</body>
</html>
